<template>
 <div>
     <h2>Home</h2>
     <!-- 声明式路由导航 使用router-link组件 -->
     <!-- <router-link 
     :to="{path:'/Home/News'}"
      tag="button"
       replace 
       active-class="active"
       >新闻</router-link>

     <router-link 
     :to="{name:'Music'}" 
     tag="button" 
     replace 
     active-class="active"
     >音乐</router-link>


     <router-link 
     :to="{name:'Game'}"
      tag="button"
       replace 
       active-class="active"
       >游戏</router-link> -->

    <!-- 编程式路由 -->
    <button @click="toNews">新闻</button>
    <button @click="toMusic">音乐</button>
    <button @click="toGame">游戏</button>
     
  <!-- 二级路由 -->
  <router-view></router-view>
 </div>
</template>

<script>
export default {
    name:"Home",
    methods:{
        toNews(){
            this.$router.push(
                "/Home/News",
            ).catch(()=>{});
        },
        toMusic(){
            this.$router.push({
                name:"Music",
            }).catch(()=>{});
        },
        toGame(){
            this.$router.push({
                name:"Game",
            }).catch(()=>{});
        },
    }
}
</script>

<style>

</style>